import React from 'react';
import styled from '@emotion/styled';
import { ChatSessions } from './ChatSessions';
import { Chat } from './Chat';

const LayoutContainer = styled.div`
  display: flex;
  height: 100vh;
  background: #0f1117;
  color: #e1e1e1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
`;

const Sidebar = styled.div`
  width: 280px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: #16171d;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
`;

const MainContent = styled.div`
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
`;

export const Layout: React.FC = () => {
  return (
    <LayoutContainer>
      <Sidebar>
        <ChatSessions />
      </Sidebar>
      <MainContent>
        <Chat />
      </MainContent>
    </LayoutContainer>
  );
}; 